<template>
	<view class="detail">
	
		<view class="address color333">
			<view class="color333 fs-36">预约信息</view>
			<view class="acea-row row-between-wrapper bor-bot py30 fs-32">
				<view>姓名</view>
				<view>{{ info.real_name }}</view>
			</view>
			<view class="acea-row row-between-wrapper bor-bot py30 fs-32">
				<view>联系方式</view>
				<view>{{ info.user_phone }}</view>
			</view>
			<view class="mt30">
				<view class="color333 fs-36">详细地址</view>
				<view class="address-info mt20">
					{{ info.user_address }}
				</view>
			</view>
		</view>
		
		<view class="item mt30">
			<view class="acea-row row-middle bor-bot pb30">
				<view class="pictrue">
					<image class="imgwh" :src="info.shopData.image" mode="aspectFit"></image>
				</view>
				<view class="ml30 flexw">
					<view class="color333 fs-40 bold line2" style="min-height: 80rpx;">{{ info.shopData.title}}</view>
					<view class="acea-row row-between">
						<view class="mt20 themecolor fs-28">{{ info.statusName }}</view>
						<!-- <view class="edit"  @click.stop="open">编辑服务</view> -->
					</view>
				</view>
			</view>
			<block v-for="(item,index) in info.otherData" :key="index">
				<view class="color333 fs-32 mt30 acea-row row-between-wrapper">
					<view>{{ item.title }}：{{ item.quantity_num }}{{ item.danwei }}</view>
					<view class="iconfont icon-jianhao" @click.stop="open(item)" v-if="info.guanjia_id>0"></view>
				</view>
			</block>
		</view>
		
		<!-- <view class="serve-btn" v-if="info.guanjia_id==0" @click="jiedan">点击服务</view> -->
		
		<uni-popup type="bottom" ref="popup">
			<view class="acea-row row-column row-middle edit-nav">
				<view class="themecolor fs-36">温馨提示</view>
				<view class="fs-40 color333 mt40">你确定减去一{{ danwei }}{{ title }}吗</view>
				<view class="acea-row row-around" style="width: 100%;margin-top: 50rpx;">
					<view class="btn cancel" @click.stop="close">取消</view>
					<view class="btn confirm" @click="delect">确认</view>
				</view>
			</view>
		</uni-popup>
		
<!-- 		<uni-popup type="center" ref="popup">
			<view class="edit-nav acea-row row-column row-middle">
				<view class="color333 fs-36 mt40">服务次数编辑</view>
				<view class="acea-row row-between-wrapper mt30 fs-32 mt40">
					<view class="color333">员工陪护剩余天数：3天</view>
					<view class="ml30">
						<input class="input" type="text" placeholder="请输入" placeholder-class="themecolor fs-28"/>
					</view>
				</view>
				<view class="acea-row row-between-wrapper mt30 fs-32 mt40">
					<view class="color333">员工陪护剩余天数：3天</view>
					<view class="ml30">
						<input class="input" type="text" placeholder="请输入" placeholder-class="themecolor fs-28"/>
					</view>
				</view>
				<view class="acea-row row-between-wrapper mt30 fs-32 mt40">
					<view class="color333">员工陪护剩余天数：3天</view>
					<view class="ml30">
						<input class="input" type="text" placeholder="请输入" placeholder-class="themecolor fs-28"/>
					</view>
				</view>
				<view class="acea-row row-around" style="width: 100%;margin-top: 50rpx;">
					<view class="btn cancel" @click.stop="close">取消</view>
					<view class="btn confirm">确认</view>
				</view>
			</view>
		</uni-popup> -->
		
	</view>
</template>

<script>
	import{
		jiaOrderDetails,
		deljiaOrder
	} from '@/api/order.js'
	export default {
		data() {
			return {
				info:[],
				id:'',
				typeid:'',
				title:'',
				danwei:'',
				
			};
		},
		onLoad(option) {
			this.id = option.id;
			this.getdetail();
		},
		methods:{
			delect(){
				deljiaOrder({ id:this.typeid }).then(res=>{
					this.$util.Tips({ title : res.msg },()=>{
						this.getdetail();
						this.close();
					})
				}).catch(err=>{
					this.$util.Tips({ title: err })
				})
			},
			getdetail(){
				jiaOrderDetails({ id : this.id }).then(res=>{
					this.info = res.data.data;
				})
			},
			open(item){
				this.typeid = item.id;
				this.title = item.title;
				this.danwei = item.danwei;
				this.$refs.popup.open()
			},
			close(){
				this.$refs.popup.close();
			}
		}
	}
</script>

<style lang="scss">
	.detail{
		padding: 30rpx;
		
		.icon-jianhao{
			color: #FD7D36;
			font-size: 50rpx;
			margin-right: 50rpx;
		}
		
		.edit-nav{
			// width: 690rpx;
			// height: 620rpx;
			// border-radius: 15rpx;
			background-color: #ffffff;
			padding: 50rpx 0;
			
			.input{
				width: 148rpx;
				height: 60rpx;
				border-radius: 8rpx;
				color: #FD7D36; 
				box-sizing: border-box;
				border: 0.8px solid #FD7D36;
				font-size: 28rpx;
				text-align: center;
			}
			.btn{
				width: 240rpx;
				height: 80rpx;
				border-radius: 10rpx;
				text-align: center;
				line-height: 80rpx;
				font-size: 28rpx;
			}
			.cancel{
				color: #9E9E9E;
				background: #E1E1E1;
			}
			.confirm{
				background: rgba(253, 125, 54, 0.2);
				color: #FD7D36;
			}
		}
		
		.address{
			width: 690rpx;
			padding: 30rpx;
			border-radius: 10rpx;
			background-color: #ffffff;
			
			.address-info{
				width: 630rpx;
				height: 140rpx;
				background-color: #F5F5F5;
				border-radius: 15rpx;
				padding: 20rpx;
			}
		}
		
		.serve-btn{
			background: #FD7D36;
			width: 690rpx;
			height: 102rpx;
			border-radius: 52rpx;
			text-align: center;
			line-height: 102rpx;
			color: #ffffff;
			font-size: 30rpx;
			margin-top: 30rpx;
		}
		
		.edit{
			background: rgba(253, 125, 54, 0.2);
			width: 176rpx;
			height: 60rpx;
			color: #FD7D36;
			font-size: 28rpx;
			border-radius: 30rpx;
			text-align: center;
			line-height: 60rpx;
		}
		
		.item{
			width: 100%;
			padding: 30rpx;
			border-radius: 20rpx;
			background-color: #ffffff;
			margin-bottom: 30rpx;
			
			.pictrue{
				width: 176rpx;
				height: 176rpx;
				border-radius: 10rpx;
				overflow: hidden;
			}
		}
		
	}
</style>
